<template>
  <div class="crash-report3">
    <el-row>
      <el-col :span="24">
        <div id="response-report" style="width: 100%; height:350px;" v-loading="responseLoading"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import echarts from 'echarts'

  var xData = ['香港', '台湾', '成都', '江苏', '天津', '内蒙古', '河南', '宁夏', '陕西', '北京']
  var resultData = [0.93, 0.94, 1.05, 1.06, 1.07, 1.08, 1.08, 1.08, 1.09, 1.10]

  export default {
    data () {
      return {
        responseLoading: false,
        chartsInstance: {
          response: ''
        },
        xData: xData,
        resultData: resultData
      }
    },
    activated () {
      this.uploadPerformance()
      this.initEcharts()
    },
    methods: {
      uploadPerformance () {
        console.log('-------performance is beginning-------')
        /* Performance({
          domain: '/web/reportResource'
        }) */
      },
      initEcharts () {
        var vm = this
        vm.chartsInstance.response = echarts.init(document.getElementById('response-report'))
        vm.getResponseReport()
        window.addEventListener('resize', () => {
          vm.chartsInstance.response.resize()
        })
      },
      getResponseReport () {
        var vm = this
        vm.responseLoading = true
        var option = {
          title: {
            text: '响应时间/地域'
          },
          tooltip: {
            // trigger: 'axis'
            // formatter: '{b}<br/>{a0}: {c0}%<br />{a1}: {c1}%'
          },
          legend: {
            show: false
          },
          // color: ['#0C81C6'],
          color: ['#4793C0'],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true
            },
            data: vm.xData
          },
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#ddd'
                }
              },
              axisTick: {
                show: false,
                alignWithLabel: true
              },
              interval: 0.3,
              min: 0,
              max: 1.20,
              axisLabel: {
                color: '#333',
                formatter: function (value) {
                  return value * 1000 + ' ms'
                }
              }
            }, {
              axisLine: {
                lineStyle: {
                  color: '#ddd'
                }
              }
            }
          ],
          series: [
            {
              name: 'Android',
              type: 'line',
              symbol: 'circle',
              symbolSize: 10,
              data: vm.resultData,
              label: {
                normal: {
                  show: true,
                  padding: [5, 8],
                  color: '#fff',
                  // backgroundColor: '#0C81C6',
                  backgroundColor: '#4793C0',
                  formatter: '{c} ms'
                }
              }
            }
          ]
        }
        vm.chartsInstance.response.setOption(option)
        vm.responseLoading = false
      }
    }
  }
</script>
<style scoped>
.el-row{
  margin-bottom: 20px;
}
</style>

